<template>
	<view class="ag_container">
		<view class="agree_jn">
		<p class="per_title"> <i class="iconfont">&#xe628;</i>{{text}}</p>
		<uni-forms ref="valiForm" :modelValue="staffForm" :rules="rules" class="personal_form" labelWidth="140rpx">
				<uni-forms-item name="mobile" label="手机号码">
				<uni-easyinput v-model="staffForm.mobile" type="text" placeholder="请输入手机号码" :maxlength="11" />
				</uni-forms-item>
			<uni-forms-item  name="name" label="姓名" required>
			<uni-easyinput v-model="staffForm.name" type="text" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item name="staffPost" label="职位">
			<uni-easyinput v-model="staffForm.staffPost" type="text" placeholder="请输入职位" />
			</uni-forms-item>
			<uni-forms-item name="remark" label="所在部门">
				<select-tree ref="tkitree" placeholder="请选择所在部门" :range="deptOptions" confirmColor="#00a660" @confirm='treeConfrim' selectParent :openRank="3" :isAdminId='true' v-model="staffForm.deptId" @cancel="treeCancel" :defaultRange="defaultDepart" :multiple="false" />
			</uni-forms-item>
			<uni-forms-item name="roleIds" label="角色">
				 <uni-data-select v-model="roleListValue" :localdata="roleList" :clear="false" :disabled="$store.getters.companyInfo.adminId == staffForm.id || $store.getters.companyInfo.legalPersonId == staffForm.id"></uni-data-select>
			</uni-forms-item>
			</uni-forms>
		</view>
		<view class="footer-btn">
			<button @click="cancel" size="mini" class="cancel_btn">取 消</button>
			<button @click="confirmForm" size="mini" class="confirm_btn">确 定</button>
		</view>
	</view>
	</view>
</template>

<script>
	import selectTree from "@/components/tree-select/tree-select";
	import {listCompanyRole} from "@/api/ec/console/org/companyRole";
	import {addDept, delDept, treeselect, updateDept} from "@/api/ec/console/org/dept";
	import {addStaff, delStaff, getStaff, listStaffPager, updateStaff, updateStaffStatus} from "@/api/ec/console/org/staff";
	export default {
		components:{selectTree},
		data() {
			return {
				text:'新增员工',
				// deptOptionsValue:'',
				roleListValue:'',
				roleList:[],//角色列表
				deptOptions:[],//所在部门
				defaultDepart:[],
				staffForm:{},      
				rules: {
					name: {rules:[{
						required: true,
						errorMessage: "请输入姓名",
						trigger: "blur"
					} ]},
					mobile: {rules:[{
						required: true,
						errorMessage: "请输入手机号码",
						trigger: "blur"
					},
					 ]},
				},
			};
		},
		onLoad(option) {
			/** 查询部门下拉树结构 */
            this.getTreeSelect()
			/** 获取企业角色 */
			this.getListCompanyRole()
			if(option.form){
				this.text = '修改员工'
				this.staffForm = JSON.parse(option.form)
				// 获取所在部门
				let departArr = []
				departArr.push({id:this.staffForm.deptId,checked:true})
				this.defaultDepart = departArr    
			}
		},
		methods: {
			/** 确认选择模板使用人 */
			treeConfrim(data) {
				this.staffForm.deptId = data.id
			},
			/** 取消选择模板使用人 */ 
			treeCancel(){
				
			},
			/** 表单提交 */
			confirmForm(){
				this.staffForm.roleIds = JSON.stringify(this.staffForm.roleIds).split('');
				this.$refs.valiForm.validate().then((res) => {
					if (this.staffForm.id != undefined) {
					   updateStaff(this.staffForm).then(response => {
					     this.$modal.msgSuccess("修改成功");
						 setTimeout(()=>{
						 	 this.cancel()
							 uni.$emit('refreshData');
						 },300)
					   })
					 } else {
					   addStaff(this.staffForm).then(response => {
						 this.$modal.msgSuccess("新增成功");
						 setTimeout(()=>{
							 this.cancel()
							 uni.$emit('refreshData');
						},300)
					     // 1 未注册：打开邀请页面，2 已注册未认证：打开邀请页面，3 已注册已认证：刷新当前页面员工列表
					   }).catch(() => {
					   });
					}  
				})
			},
			/** 取消新增 */
			cancel(){
				uni.navigateBack(1)
			},
			/** 获取企业角色 */
			getListCompanyRole() {
			  listCompanyRole().then(response => {
				var list = []
				  for(var i = 0;i<response.data.length;i++){
				  	var object = {};
				  	object.text = response.data[i].name; // 展示text
				  	object.value = response.data[i].id; // 用id查询 
				  	list.push(object);							
				  }
				this.roleList = list;
				this.staffForm.roleIds  = this.roleListValue = this.roleList[0].value
			  });
			},    
			/** 查询部门下拉树结构 */
			getTreeSelect() {
        this.$modal.loading();
			  let data = {isCertify: 1, status: 1}
			  treeselect(data).then(response => {
				uni.hideLoading()
				this.deptOptions = response.data
				// 新增时获取所在部门数据
				if(this.staffForm.mobile == null){
					this.defaultDepart.push({id:this.deptOptions[0].id,checked:true})
				}
			  });
			}, 
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: $uni-bg-color;
	}
	::v-deep .check{border:4rpx solid $uni-color-primary;border-top: 0;border-left: 0;}
	::v-deep .selected-item-active{border-bottom:4rpx solid $uni-color-primary;}
	::v-deep .uni-forms-item__label{padding: 0;}
	.footer-btn{
			 margin-top: 260rpx;
			 display: flex;
			 justify-content: space-around;
			 .confirm_btn{
				 width: 40%;
				 background-color: $uni-color-primary;
				 color: #fff;
				 height: 70rpx;
				 line-height: 70rpx;
			 }
	}
	.cancel_btn{
		background-color: #fff;
		color: $uni-color-primary;
		width: 40%;
		height: 70rpx;
		line-height: 70rpx;
		border: 1rpx solid $uni-color-primary;
	}
	.per_title {
		font-size: 30rpx;
		color: #666666;
		border-bottom: 1rpx solid #d3d3d3;
		padding-bottom: 16rpx;

		.iconfont {
			padding-right: 6rpx;
		}
	}

	.personal_form {
		margin-top: 40rpx;
		padding: 0 30rpx;
		position: relative;
	}

	.agree_jn {
		padding:30rpx 20rpx 0 20rpx;
	}
</style>
